<template>
	<!-- 考勤记录 -->
	<div>
		<div class="condition" style="padding:0.2rem 0;">
			<el-select class="select" v-model="searchParam.signinMode" 
				placeholder="全部考勤状态" clearable>
				<el-option label="未签到" value="0"></el-option>
				<el-option label="签到" value="1"></el-option>
				<el-option label="旷课" value="5"></el-option>
			</el-select>
			
			<el-select class="select" v-model="searchParam.classId"
				placeholder="全部考勤班级" clearable filterable @change="selectClass">
				<el-option v-for="item in classList" :key="item.classId"
						:label="item.className" :value="item.classId">
				</el-option>
			</el-select>
			
			<el-select class="select" v-if="searchParam.classId" v-model="searchParam.classSyllabusId" 
				placeholder="上课时间" clearable>
				<el-option v-for="item in classSyllabusList" :key="item.classSyllabusId"
						:label="item.time" :value="item.classSyllabusId">
				</el-option>
			</el-select>
			
			<el-input v-model="searchParam.keyword" placeholder="搜索 试听用户名/手机号" 
				style="width: 3.15rem;" clearable maxlength="100">
			</el-input>
			&emsp;
			
			<div class="search_btn" @click="search(1)" v-if="hasApi('auditionSigninRecord')">搜索</div>
		</div>
		<div class="box-table" style="margin-top:0.1rem;">
			<table class="table" cellspacing="0">
				<thead class="thead">
					<tr>
						<td style="width: 1.5rem;">姓名</td>
						<td style="width: 3rem;">试听班级</td>
						<td style="width: 3rem;">试听课程</td>
						<td style="width: 1.5rem;">教师</td>
						<td style="width: 3rem;">上课时间</td>
						<td style="width: 1rem;">考勤状态</td>
						<td style="width: 1.5rem;">签到人</td>
						<td style="width: 2rem;">签到时间</td>
					</tr>
				</thead>
				<tbody class="tbody" v-if="reacordList&&reacordList.length>0">
					<tr v-for="(item,index) in reacordList" :key="index">
						<td>{{item.realName}}</td>
						<td>{{item.className}}</td>
						<td>{{item.courseName}}</td>
						<td>{{item.teacherUserName}}</td>
						<td>{{item.trailTime}}</td>
						<td>
							<!-- <el-button type="text" v-if="(item.signinMode==1 || item.signinMode==5) && hasApi('auditionSigninEdite')"
							 style="font-size:0.16rem;" @click="auditionSigninEdite(item)">{{signinModeMap[item.signinMode]||'未签到'}}</el-button> -->
							 <el-popover
								placement="top"
								width="250"
								v-model="item.alterSigninPopup">
								<div>
									<span style="font-size:0.16rem;display:inline-block;margin:0.05rem 0;">修改考勤状态：</span>
									<div style="margin:0.08rem 0;">
										<el-radio v-model="item.alterSigninMode" :disabled="item.signinMode==1" label="1">签到</el-radio>
  										<el-radio v-model="item.alterSigninMode" :disabled="item.signinMode==5" label="5">旷课</el-radio>
									</div>
									<div style="margin:0.08rem 0;text-align: center;">
										<el-button size="mini" @click="item.alterSigninPopup = false">取消</el-button>
										<el-button size="mini" :disabled="item.alterSigninMode==item.signinMode" type="primary" @click="auditionSigninEdite(item)">确认</el-button>
									</div>
								</div>
								<el-button slot="reference" type="text" v-if="(item.signinMode==1 || item.signinMode==5) && hasApi('auditionSigninEdite')"
							 	style="font-size:0.16rem;">{{signinModeMap[item.signinMode]||'未签到'}}</el-button>
							</el-popover>
						</td>
						<td>{{item.createUserName}}</td>
						<td>{{item.signinTime}}</td>
					</tr>
				</tbody>
				<tbody class="tbody" v-else>
					<tr>
						<td colspan="8" align="center">暂无该班的考勤数据</td>
					</tr>
				</tbody>
			</table>
			
		</div>
		<el-pagination
		 	style="margin-top:0.1rem;"
			layout="total, sizes, prev, pager, next, jumper"
			:current-page="searchParam.currPage"
			:total="pagination.total"
			@size-change="pageSizeChange"
			@current-change="pageIndexChange">
		</el-pagination>
	</div>
</template>

<script>
var vm;
export default {
	data : function() {
		return {
			searchParam:{
				campusId:'',
				pageSize:10,
				currPage:1,
				signinMode:'',
				classId:'',
				classSyllabusId:'',
				keyword:''
			},
			pagination:{
				total:0,
			},
			//表格数据
			reacordList:[],
			//班级列表
			classList:[],
			//上课时间列表
			classSyllabusList:[],

			signinModeMap:null
		}
	},
	computed : {},
	methods : {
		init : function() {
			// this.resetParam();
			this.searchParam.campusId=this.$store.state.campusId;
			this.apiGetSigninRecord();
			this.getClassList();
		},
		/**获取考勤记录 */
		apiGetSigninRecord(){
			api.auditionSigninRecord(this.searchParam).then(function(data){
				if(data.resultCode==2000){
					vm.pagination.total=data.totalCount;
					vm.reacordList=data.list;
					vm.reacordList.forEach(element => {
						let t='';
						if(element.startTime&&element.endTime){
							let start=element.startTime.split(' ');
							let end=element.endTime.split(' ');
							t=start[0]+' '+start[1]+'-'+end[1];
						}
						else if(element.startTime){
							t=element.startTime;
						}
						else if(element.endTime){
							t=element.endTime;
						}
						// element.trailTime=t;
						// element.alterSigninMode=element.signinMode;
						// element.alterSigninPopup=false;
						vm.$set(element,'trailTime',t);
						vm.$set(element,'alterSigninMode',element.signinMode);
						vm.$set(element,'alterSigninPopup',false);
					});
				}
			});
		},
		/**重置查询参数 */
		resetParam(){
			this.searchParam={
				pageSize:10,
				currPage:1,
				signinMode:'',
				classId:'',
				classSyllabusId:'',
				keyword:''
			};
			this.pagination.total=0;
		},
		/**获取班级列表 */
		getClassList(){
			api.auditionList({campusId:this.$store.state.campusId}).then(function(data){
				if(data.resultCode==2000){
					vm.classList=data.list;
				}
			});
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.searchParam.pageSize = val;
	    	vm.search(1);
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.searchParam.currPage = val;
	    	vm.search();
		},
		search : function(index) {
			if(index)vm.searchParam.currPage = index;
			this.apiGetSigninRecord();
		},
		/**选择班级 */
		selectClass(){
			vm.searchParam.classSyllabusId="";
			var param = {
				classId : this.searchParam.classId
			};
			api.auditionSyllabus(param).then(function(data) {
				if(data.resultCode==2000){
					let slist=[];
					data.list.forEach(element => {
						let t='';
						if(element.startTime&&element.endTime){
							let start=element.startTime.split(' ');
							let end=element.endTime.split(' ');
							t=start[0]+' '+start[1]+'-'+end[1];
						}
						else if(element.startTime){
							t=element.startTime;
						}
						else if(element.endTime){
							t=element.endTime;
						}
						slist.push({
							time:t,
							classSyllabusId:element.classSyllabusId
						})
					});
					vm.classSyllabusList=slist;
				}
			});
		},
		/**修改签到状态 */
		auditionSigninEdite(item){
			item.alterSigninPopup=false;
			api.auditionSigninEdite({classSigninId:item.classSigninId,signinMode:item.alterSigninMode}).then(function(data){
				if(data.resultCode==2000){
					tool.message({type: "success", message : "考勤修改成功"});
					vm.search();
				}
				else{
					tool.message({type: "warning", message : data.message||'操作失败！'});
				}
			});
		}
	},
	created : function() {
		vm = this;
		this.signinModeMap=tool.getDictNameByValue(-100,'signin_mode',false);
	}
}

</script>
<style scoped src="@/style/module/table.css"></style>
<style scoped>

</style>